<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 基础类（共性样式） */
			.btn {
				width: 120px;
				height: 40px;
				color: white;
				border: none;
				cursor: pointer;
			}
			/* 特性类（各种风格专有的特性样式） */
			.btn-default {
				border: 1px solid #ccc;
				background-color: #fff;
				color: #2b2b2b;
			}
			.btn-primary {
				background-color: #409eff;
			}
			.btn-success {
				background-color: #67c23a;
			}
			.btn-info {
				background-color: #909399;
			}
			.btn-warn {
				background-color: #e6a23c;
			}
			.btn-danger {
				background-color: #f56c6c;
			}
		</style>
	</head>
	<body>
		<button class="btn btn-default">Default</button>
		<button class="btn btn-primary">Primary</button>
		<button class="btn btn-success">Success</button>
		<button class="btn btn-info">Info</button>
		<button class="btn btn-warn">Warning</button>
		<button class="btn btn-danger">Danger</button>
	</body>
</html>
